/**
 * @author yz
 */

MlogCount = 0;
Mlog = function(value){
	MlogCount++;
	if (document.getElementById('debugInfo') != null) {
		document.getElementById('debugInfo').innerText = value;
	}
};

Mashuproom = {};

Mashuproom.main = function(){
};

Mashuproom.main.prototype = {

    init: function(){
		
		Mlog("App start...");
        
        Ext.QuickTips.init();
        
        var basicScript1 = "<!--Dont' modify the code below-->\n<script language=\"javascript\" type=\"text/javascript\">\nfunction loadjss(C,E){var B=C.length;var A=0;for(f in C){var D=document.createElement(\"script\");D.language=\"javascript\";D.type=\"text/javascript\";D.src=C[f];D.done=false;D.onload=D.onreadystatechange=function(){if(!this.done&&(!this.readyState||this.readyState==\"loaded\"||this.readyState==\"complete\")){this.done=true;A++;if(A==B){E()}}};document.getElementsByTagName(\"HEAD\")[0].appendChild(D)}}function loadcss(B){for(f in B){var A=document.createElement(\"link\");A.type=\"text/css\";A.rel=\"Stylesheet\";A.href=B[f];document.getElementsByTagName(\"HEAD\")[0].appendChild(A)}};\n</script>\n<!--Dont' modify the code above-->";
        
		var utilScript = "<!--Dont' modify the code below-->\n<script language=\"javascript\" type=\"text/javascript\">\n\
if(!window.Mashuproom){window.Mashuproom={}}if(!window.Mashuproom.util){window.Mashuproom.util={}}Mashuproom.util.loadjs\
=function(C,E){var B=C.length;var A=0;for(f in C){var D=document.createElement(\"script\");D.language=\"javascript\";\
D.type=\"text/javascript\";D.src=C[f];D.done=false;D.onload=D.onreadystatechange=function(){if(!this.done&&(!this.readyState||\
this.readyState==\"loaded\"||this.readyState==\"complete\")){this.done=true;A++;if(A==B){E()}}};document.getElementsByTagName\
(\"HEAD\")[0].appendChild(D)}};Mashuproom.util.loadcss=function(B){for(f in B){var A=document.createElement(\"link\");\
A.type=\"text/css\";A.rel=\"Stylesheet\";A.href=B[f];document.getElementsByTagName(\"HEAD\")[0].appendChild(A)}};\n\
</script>\n<!--Dont' modify the code above-->";
        
		this.mashupConfig = {};
		
		var codep = this.codep = new CodePanel({
            lineNumbers: true,
            title: 'Code',
            id: 'codep'
        });
        
        var previewp = this.previewp = new PreviewPanel({
            title: 'Preview',
            id: 'previewp'
        });
        
        var designp = this.designp = new DesignPanel({
            title: 'Design',
            id: 'designp'
        });
		
		this.centertab = new Ext.TabPanel({
			id:'centertab',
            region: 'center',
            xtype: 'tabpanel',
            activeTab: 0,
            items: [this.designp, this.codep, this.previewp]
        });
		
		this.componentsp = new ComponentsPanel({
            region: 'west',
            scroll: true,
            title: 'Components',
            width: 200
        });  
        this.componentsp.on('render', function(){
            this.doLayout();
        })
        
        this.propertyp = new Ext.grid.PropertyGrid({
            region: 'east',
            title: 'Properties',
            scroll: true,
			source:this.mashupConfig,
			collapsible:true,
            width: 220
        });
		
		///Event handler
		this.designp.on('afterconfigchange',function(cfg){
			Mlog("Config changed");
			this.mashupConfig=cfg;
			this.propertyp.setSource(cfg);
			this.codep.setCode(utilScript + "\n" + designp.codeString);;
		},this);	
		this.designp.on('deactivate',function(){
			this.componentsp.view.disable();
			this.componentsp.view.dragZone.lock();
			this.propertyp.setSource({});
		},this);
		this.designp.on('activate',function(){
			this.componentsp.view.enable();
			this.componentsp.view.dragZone.unlock();
			this.propertyp.setSource(this.mashupConfig);
		},this);
		
		this.centertab.on('beforetabchange',function(p, newtab, currenttab){
			//Mlog("beforetabchange");
			if((newtab.getId()=='designp')&&(currenttab!=null)&&(this.codep.getCode()!=this.codep.content)){
				Ext.Msg.show({
					title:'Warning',
					msg:'The config has been changed, design view is no longer available.<br/>Drop all the changes and continue?',
					buttons:Ext.Msg.YESNO,
					fn:function(btn){
						if (btn == 'yes') {
							this.codep.refreshCode();
							this.centertab.setActiveTab('designp');
						}else{
						}
					},
					scope:this,
					icon:Ext.MessageBox.WARNING
				});
				return false;
			}else{
				return true;
			}
		},this);
        
        this.previewp.on('activate', function(p){
			Mlog('previewp activate');
            p.lazyUpdateContent(codep.getCode());
        });
		this.propertyp.on('propertychange',function(source,recordId,value){
			Mlog("Property changed");
			this.mashupConfig[recordId]=value;
			this.designp.setConfig(this.mashupConfig);
		},this);
		
		this.codep.on('saverun',function(){
			this.centertab.setActiveTab('previewp');
		},this);
		
        ///Initialize the window   
        this.viewport = new Ext.Viewport({
            layout: 'border',
            items: [new Ext.BoxComponent({
                region: 'north',
                el:'header'
            }), this.componentsp, this.centertab, this.propertyp, {
                region: 'south',
                title: 'Debug information',
                contentEl:"debugInfo",
                split: true,
                height: 100,
                minHeight: 100
            }]
        });   
        
    }
}

Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
	var app = new Mashuproom.main();
	app.init();
});
